<template>
  <div class="title">
    <div class="pointContainer">
      <div class="p1"></div>
      <div class="p2"></div>
    </div>
    <div class="titleText">
      {{ title1 }}<span class="listStyle">{{ title2 }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  title1: {
    type: String,
  },
  title2: {
    type: String,
  },
});
const { title1, title2 } = toRefs(props);
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .titleText {
    font-family: Microsoft YaHei;
    font-weight: bolder;
    color: #676767;
    .listStyle {
      color: #409eff;
    }
  }
  .pointContainer {
    position: relative;
    width: 15px;
    height: 15px;
    margin-right: 12px;
    .p1 {
      width: 10px;
      height: 10px;
      background: #e4f4ff;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .p2 {
      width: 10px;
      height: 10px;
      background: #409eff;
      border-radius: 50%;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
